<template>
  <a-cascader
    :size="'mini'"
    :model-value="departmentId"
    :options="departmentOptions"
    :field-names="departmentFieldNames"
    :placeholder="placeholder"
    allow-clear
    allow-search
    @change="change"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { DepartmentView } from '@/types/idm/department';
  import { fetchDepartmentAllTree } from '@/api/idm/department';

  // defineProps(['departmentId']);
  defineProps({
    departmentId: {
      type: Number,
      default() {
        return undefined;
      },
    },
    placeholder: {
      type: String,
      default() {
        return '请选择部门';
      },
    },
  });
  const emit = defineEmits(['update:departmentId']);

  const departmentFieldNames = { value: 'id', label: 'name' };
  const departmentOptions = ref([] as DepartmentView[]);

  // 进入页面之后执行的第一个函数
  const onPageLoad = async () => {
    const departmentAllTreeRes = await fetchDepartmentAllTree({});
    departmentOptions.value = departmentAllTreeRes.data;
  };
  onPageLoad();

  function change(val: any) {
    emit('update:departmentId', val);
  }
</script>

<style scoped lang="less">
  .container-breadcrumb {
    margin: 16px 0;
    :deep(.arco-breadcrumb-item) {
      color: rgb(var(--gray-6));
      &:last-child {
        color: rgb(var(--gray-8));
      }
    }
  }
</style>
